import React, { useState,useCallback } from "react";
import { Modal, Button, Descriptions } from 'antd';
import moment from 'moment';
import { UnorderedListOutlined} from '@ant-design/icons';

function ClassDetail(props){
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [curStu,setCurStu] =useState({})
    const {lookItem,classDetail} =props
    const showModal = () => {
        setIsModalVisible(true);
        lookItem()
        setCurStu(classDetail)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <>
            <Button type="link" onClick={showModal}>
            <UnorderedListOutlined /> 详情
            </Button>
            <Modal visible={isModalVisible} onCancel={handleCancel } footer={null}>
                <Descriptions title="班级信息">
                    <Descriptions.Item label="班级">{curStu.name}</Descriptions.Item>
                    <Descriptions.Item label="科目">{curStu.category}</Descriptions.Item>
                    <Descriptions.Item label="城市">{curStu.city}</Descriptions.Item>
                    <Descriptions.Item label="开学时间">{moment(curStu.add_time).format('YYYY-MM-DD')}</Descriptions.Item>
                </Descriptions>
            </Modal>
        </>
    )
}

export default ClassDetail